<!--
 * @Description: 健康
 * @Author: ZhangHan
 * @Date: 2025-07-24 17:51:35
 * @LastEditTime: 2025-09-16 08:49:18
 * @LastEditors: ZhangHan
-->
<template>
  <view class="mypage">
    <view class="form_content">
      <view class="title">请输入您的身高、体重、腰围，计算您的BMI指数，生成健康数据</view>
      <uni-forms ref="valiForm" :modelValue="formData" :rules="rules">
        <uni-forms-item label="身高" required name="height">
          <uni-easyinput
            type="number"
            v-model="formData.height"
            placeholder="请输入身高"
          >
            <template #right>
              <view style="width: 10%">cm</view>
            </template>
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="体重" required name="weight">
          <uni-easyinput
            type="digit"
            v-model="formData.weight"
            placeholder="请输入体重"
          >
            <template #right>
              <view style="width: 10%">kg</view>
            </template>
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="腰围" name="wastLine">
          <uni-easyinput
            type="digit"
            v-model="formData.wastLine"
            placeholder="请输入腰围"
          >
            <template #right>
              <view style="width: 10%">cm</view>
            </template>
          </uni-easyinput>
        </uni-forms-item>
      </uni-forms>
      <button :type="'primary'" @click="submit">生成BMI指数</button>

      <view class="cankao">BMI指数范围展示</view>

      <view class="bmi-category" style="border: 2px solid gray;">
        <view class="status-text" style="color: gray;">体重偏瘦</view>
        <view class="bmi-range">BMI ＜ 18.5</view>
        <view class="description">
          体重偏瘦可能意味着身体脂肪不足，可能需要适当增加营养摄入和进行力量训练以增加肌肉量。
        </view>
      </view>

      <view class="bmi-category" style="border: 2px solid #52c41a;">
        <view class="status-text" style="color: #52c41a;">体重正常</view>
        <view class="bmi-range">18.5 ≤ BMI ＜ 24.0</view>
        <view class="description">
          体重在正常范围内，表明身体质量指数处于健康水平。保持均衡饮食和适量运动有助于维持健康状态。
        </view>
      </view>

     
      <view class="bmi-category" style="border: 2px solid orange;">
        <view class="status-text" style="color: orange;">体重超重</view>
        <view class="bmi-range">24.0 ≤ BMI ＜ 28.0</view>
        <view class="description">
          体重略高于正常范围，建议适当控制饮食并增加运动量，以降低健康风险。
        </view>
      </view>


      <view class="bmi-category" style="border: 2px solid red;">
        <view class="status-text" style="color: red;">体重肥胖</view>
        <view class="bmi-range">BMI ≥ 28.0</view>
        <view class="description">
          体重处于肥胖范围，可能增加多种健康问题的风险。建议咨询医生或营养师，制定合适的减重计划。
        </view>
      </view>

    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onShow, onHide } from "@dcloudio/uni-app";
import { useTransForm } from "@/hooks/useTransForm";
import { useGo } from "@/hooks/usePage";
import { ROUTER_PATH } from "@/concacts/routerPath";

const { addTransform, destroyEventListeners } = useTransForm();
const go = useGo();
const formData = reactive<any>({});
const valiForm = ref<any>();

onShow(() => {
  // #ifdef H5
  addTransform(".bmi-category", "bmi_active");
  // #endif
});

onHide(() => {
  // #ifdef H5
  destroyEventListeners(".bmi-category", "bmi_active");
  // #endif
});

//提交事件
const submit = () => {

  valiForm.value
    ?.validate()
    .then(() => {
      console.log(formData);
      go(ROUTER_PATH.InfoCard + `?data=${JSON.stringify(formData)}`);
    })
    .catch((err: any) => {
      console.log(err);
    });
};

//表单验证规则
const rules = {
  height: {
    rules: [{ required: true, errorMessage: "请输入身高" }],
  },

  weight: {
    rules: [{ required: true, errorMessage: "请输入体重" }],
  },
};
</script>

<style scoped lang="scss">
@use "./index.scss";
</style>


